<!DOCTYPE html>
<html lang="en" data-theme="blue">
  <head>
    <title>Themepro</title>    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/themepro/index.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/red.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/blue.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/dark.css" />          
    <script src="/themepro/index.umd.js"></script>
    <style> 
        .theme{
            padding:0.5em 1em;
            background:white;
            border:1px solid #333;
            cursor: pointer;
            color:gray;
        }
    </style> 
  </head>
  <body>
    <div style="background:var(--t-theme-bgcolor);text-align:center"> 
    --t-theme-bgcolor
        <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-1);text-align:center"> 
            --t-theme-bgcolor-1
            <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-2);text-align:center"> 
                --t-theme-bgcolor-2
                <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-3);text-align:center"> 
                    --t-theme-bgcolor-3
                    <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-4);text-align:center"> 
                        --t-theme-bgcolor-4
                        <div id="themes" style="padding:1em;display:flex;gap:0.5em;justify-content:center;">
                            <div class="theme" style="background:white;">Light</div>
                            <div class="theme" style="background:#444;">Dark</div>
                            <div class="theme" style="background:blue;">Blue</div>
                            <div class="theme" style="background:red;">Red</div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>        
    <script>
    const element = document.getElementById('themes');  
    element.addEventListener('click', (event) => {
        document.documentElement.dataset.theme = event.target.innerText.toLowerCase();  
    });
    </script>
  </body>
</html>

